1. RWD設計模式

https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=zh-tw
https://codepen.io/Rouoxo/pen/qBVRMBz

2. vh、vw、vmax、vmin

https://codepen.io/Rouoxo/pen/ZEaLRmp

      .first {
        background-color: lightcoral;
        width: 75vw;
        height: 50vh;
      }

      .second {
        background-color: lightskyblue;
        width: 25vmax;    /* vmax當前vw和vh中較大的值  25％ / 75vw   */
        height: 25vmin;   /* vmin當前vw和vh中較小的值  25％ / 50vh  */
      }

3. orientation：螢幕方向，用於檢查視窗 viewport

https://codepen.io/Rouoxo/pen/JjOWJGM

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }

4. aspect-ratio：縱橫比 (div才能使用)

https://codepen.io/Rouoxo/pen/gOXmRry

      <div class="aspect-ratio">４比３</div>
      
      .aspect-ratio {
        aspect-ratio: 4 / 3;
        background-color: aqua;
        margin: 0 0 1rem 0;
      }

5. em、rem

(1) em 的文字大小基準取決於父層的文字大小，所以建議使用在限制區域
(2) rem 的文字基準取決於最外層 html 文字大小，適合 RWD 響應式網頁
https://codepen.io/Rouoxo/pen/mdqRxLd

6. @media screen

https://codepen.io/Rouoxo/pen/YzENavm

      /* max-width：表示設定數值「小於等於」、「以下」 */
      /* 700~1000之間 */
      /* 最小700最大1000 */
      @media only screen and (min-width: 700px) and (max-width: 1000px) {
        div {
          background-color: green;
        }
        div::before {
          content: "此時最小700最大1000";
        }
      }